import React, { useEffect, useState } from 'react';
import { useDispatch } from 'umi';
import { addUser, userAdmin, userData, getView ,getApi} from '@/services/index';
import { Tabs, Input, Select, message, Button } from 'antd';
import './_layout.less';
//ant表单样式
const info = () => {
    message.info('提交成功');
};
const { Option } = Select;
function handleChange(value: any) {
    console.log(`selected ${value}`);
}
const { TabPane } = Tabs;
function callback(key: any) {
    console.log(key);
}
const AddUser: React.FC = () => {

    const [geta,seta]=useState<any[]>([])

    const [getA, setA] = useState<any[]>([])

    const [getUser, setUser] = useState<any[]>([]);

    const [getData, setData] = useState<any[]>([]);

    //用户身份id
    const [getUseridentity, setUseridentity] = useState<any[]>([]);
    // 通过useDispatch拿到派发redux的dispatch
    const dispatch = useDispatch();


    useEffect(() => {
        getApi().then(res => {
            console.log(res.data)
            seta(res.data);
        })
    }, [])


    useEffect(() => {
        getView().then(res => {
            // console.log(res.data)s
            setA(res.data);
        })
    }, [])


    useEffect(() => {
        userData().then(res => {
            // console.log(res.data)
            setData(res.data)
        })
    }, [])


    useEffect(() => {
        userAdmin().then(res => {
            // console.log(res.data)
            setUser(res.data);
        })
    }, [])


    //渲染用户id
    useEffect(() => {
        // addUser().then((res: { data: React.SetStateAction<any[]> }) => {});
    }, []);
    //添加
    useEffect(() => {
        dispatch({
            type: 'question/addUser',
        });
    }, []);
    return (
        <div className="AddUser">
            <div className="top">
                {/**添加用户 */}
                <div className="div1">
                    {/* 添加用户*/}
                    <Tabs onChange={callback} type="card">
                        <TabPane tab="添加用户" key="1">
                            {/**添加用户表单 */}
                            <Input placeholder="请输入用户名" />
                            <Input placeholder="请输入密码" />
                            {/**选择器 */}
                            <Select
                                defaultValue="请选择身份ID"
                                style={{ width: 150 }}
                                onChange={handleChange}
                            >


                                {
                                    getUser.map((item, index) => {
                                        return <Option value={item.identity_text} key={index}>{item.identity_text}</Option>
                                    })
                                    // identity_text
                                }

                                {/* <Option value="请选择身份id">

                                </Option> */}
                            </Select>
                            {/**确定提交按钮 */}
                            <div>
                                <Button type="primary" onClick={info}>
                                    确定
                                </Button>
                                <Button>重置</Button>
                            </div>
                        </TabPane>
                        {/**更新修改用户 */}
                        <TabPane tab="更新用户" key="2">
                            <div className="UserChanger">
                                {/**选择器 */}
                                <Select
                                    defaultValue="请选择身份id"
                                    style={{ width: 150 }}
                                    onChange={handleChange}
                                >
                                    {
                                        getData.map((item, index) => {
                                            return <Option value={item.user_name} key={index}>{item.user_name}</Option>
                                        })
                                    }

                                </Select>
                                {/**添加用户表单 */}
                                <Input placeholder="请输入用户名" />
                                <Input placeholder="请输入密码" />
                                {/**选择器 */}
                                <Select
                                    defaultValue="请选择身份id"
                                    style={{ width: 150 }}
                                    onChange={handleChange}
                                >
                                    {
                                        getUser.map((item, index) => {
                                            return <Option value={item.identity_text} key={index}>{item.identity_text}</Option>
                                        })
                                        // identity_text
                                    }
                                    {/* <Option value="请选择身份id"> </Option> */}
                                </Select>
                                <div>
                                    <Button type="primary" onClick={info}>
                                        确定
                                    </Button>
                                    <Button>重置</Button>
                                </div>
                            </div>
                        </TabPane>
                    </Tabs>
                </div>
                {/* 添加身份*/}
                <div className="div2">
                    <Tabs onChange={callback} type="card">
                        <TabPane tab="添加身份" key="1">
                            {/**添加用户表单 */}
                            <Input placeholder="请输入身份名称" />
                            {/**确定提交按钮 */}
                            <div>
                                <Button type="primary" onClick={info}>
                                    确定
                                </Button>
                                <Button>重置</Button>
                            </div>
                        </TabPane>
                    </Tabs>
                </div>
                {/* 添加api接口权限*/}
                <div className="div3">
                    <Tabs onChange={callback} type="card">
                        <TabPane tab="添加api接口权限" key="1">
                            {/**添加用户表单 */}
                            <Input placeholder="请输入api接口权限名称" />
                            <Input placeholder="请输入api接口权限url" />
                            <Input placeholder="请输入api接口权限方法" />
                            {/**确定提交按钮 */}
                            <div>
                                <Button type="primary" onClick={info}>
                                    确定
                                </Button>
                                <Button>重置</Button>
                            </div>
                        </TabPane>
                    </Tabs>
                </div>
            </div>
            <div className="maller">
                {/**添加视图接口权限*/}
                <div className="div4">
                    <Tabs onChange={callback} type="card">
                        <TabPane tab="添加视图接口权限" key="1">
                            {/**选择器 */}
                            <Select
                                defaultValue="请选择已有视图"
                                style={{ width: 150 }}
                                onChange={handleChange}
                            >
                                {
                                    getA.map((item, index) => {
                                        return <Option value={item.view_authority_text} key={index}>{item.view_authority_text}</Option>
                                    })
                                    // view_authority_text
                                }

                            </Select>
                            {/**确定提交按钮 */}
                            <div>
                                <Button type="primary" onClick={info}>
                                    确定
                </Button>
                                <Button>重置</Button>
                            </div>
                        </TabPane>
                    </Tabs>
                </div>
                {/**给身份设置api接口权限*/}
                <div className="div5">
                    <Tabs onChange={callback} type="card">
                        <TabPane tab="给身份设置api接口权限" key="1">
                            {/**选择器 */}
                            <Select
                                defaultValue="请选择身份id"
                                style={{ width: 150 }}
                                onChange={handleChange}
                            >
                                
                                {
                                    getUser.map((item, index) => {
                                        return <Option value={item.identity_text} key={index}>{item.identity_text}</Option>
                                    })
                                    // identity_text
                                }
                            </Select>
                            {/**选择器 */}
                            <Select
                                defaultValue="请选择api接口权限"
                                style={{ width: 150 }}
                                onChange={handleChange}
                            >
                                {
                                    geta.map((item, index) => {
                                        return <Option value={item.api_authority_text} key={index}>{item.api_authority_text}</Option>
                                    })
                                    // api_authority_text
                                }
                            </Select>
                            {/**确定提交按钮 */}
                            <div>
                                <Button type="primary" onClick={info}>
                                    确定
                                </Button>
                                 <Button>重置</Button>
                            </div>
                        </TabPane>
                    </Tabs>
                </div>
                {/**给身份设置视图权限*/}
                <div className="div6">
                    <Tabs onChange={callback} type="card">
                        <TabPane tab="给身份设置视图权限" key="1">
                            {/**选择器 */}
                            <Select
                                defaultValue="请选择身份ID"
                                style={{ width: 150 }}
                                onChange={handleChange}
                            >
                            {
                                getUser.map((item, index) => {
                                    return <Option value={item.identity_text} key={index}>{item.identity_text}</Option>
                                })
                                // identity_text
                            }
                            </Select>
                            {/**选择器 */}
                            <Select
                                defaultValue="请选择视图权限id"
                                style={{ width: 150 }}
                                onChange={handleChange}
                            > {
                                getA.map((item, index) => {
                                    return <Option value={item.view_authority_text} key={index}>{item.view_authority_text}</Option>
                                })
                                // view_authority_text
                            }
                            </Select>
                            {/**确定提交按钮 */}
                            <div>
                                <Button type="primary" onClick={info}>
                                    确定
                                </Button>
                                <Button>重置</Button>
                            </div>
                        </TabPane>
                    </Tabs>
                </div>
            </div>
        </div>
    );
};

export default AddUser;

